<template>
	<view class="container">
		<navbar title="搜索" :background="background" :bgSize='bgSize' color='#fff'></navbar>
		<view class="linear-goods-list-bg">
			<image :src='hostUrl+"/static/images/cart_bg.png"'></image>
		</view>
		<view class="search-wrap line-center">
			<view class="search-main line-v-center">
				<view class="search-icon">
					<uni-icons type="search" color="#999" size="20"></uni-icons>
				</view>
				<input placeholder="万千商品，等你来采购" v-model="goodsName" class="search-con" focus confirm-type='search' placeholder-class="pl" @confirm='toSearch' @input='getValue'/>
				<view class="close-btn line-center" @tap='delSearchData' v-if='showDel'>
					<uni-icons type="clear" color="#999" size="20"></uni-icons>
				</view>
				<view class="line"></view>
				<view class="btn line-center" @tap='reload'>搜索</view>
			</view>
		</view>
		
		<scroll-view class="wrap" :style="{height:scrollViewHeight+'px'}" scroll-y="true" @scrolltolower='loadData' refresher-background='#F2F4F7' :refresher-triggered='refresherTriggered' refresher-enabled='true' @refresherrefresh='refreshList'>
			<template v-if='goodsList.length > 0'>
				<view class="goods-wrap">
					<view class="goods-item" v-for='(item,index) in goodsList' @tap='toGoodsDetail(item.goods_id)'>
						<view class="goods-img">
							<base-img :src='item.goods_image'></base-img>
						</view>
						<view class="goods-info">
							<view class="goods-name line-ellipsis">
								{{item.goods_name}}
							</view>
							<view class="goods-b line-v-center">
								<view class="goods-price-wrap">
									<view class="goods-price">
										<text>￥</text>{{item.goods_price_min}}
										<text class="unit" v-if='item.goods_unit'>/{{item.goods_unit}}</text>
									</view>
									<view class="goods-price-line">￥{{item.market_price_min}}<text class="unit" v-if='item.goods_unit'>/{{item.goods_unit}}</text></view>
								</view>
								<view class="cart" @tap.stop='addCart(item.goods_id)'>
									<image src='../static/cart.png'></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<loading :loadEnd='loadEnd'></loading>
			</template>
			<view class="no-data-wrap" v-else>
				<no-data noDataImg='/static/no-search.png'></no-data>
			</view>
		</scroll-view>
		<!-- sku弹窗 -->
		<sku-modal :skuMode='1' :goods="goodsDetail" ref='skuModal'></sku-modal>
	</view>
</template>

<script>
	const app = getApp();
	import debounce from '@/utils/debounce.js';
	import skuModal from '@/components/sku-modal/sku-modal.vue';
	export default {
		components: {
			skuModal
		},
		data() {
			return {
				background:`url(${app.globalData.hostUrl}/static/images/cart_bg.png)`,
				bgSize:'100% 344rpx',
				hostUrl:app.globalData.hostUrl,
				scrollViewHeight:0,
				goodsList: [],
				goodsDetail:{},
				page: 1,
				totalPage: '',
				showPage: true,
				loadEnd: false,
				goodsName:'',
				Authorization:'',
				refresherTriggered:true,
				showDel: false,
			};
		},
		onShow(){
			this.Authorization = uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : "";
		},
		onLoad() {
			this.getScrollHeight();
			
			// this.getGoodsList()
		},
		methods:{
			getValue(e){
				const that = this;
				debounce(() => {
					const v = this.$trim(e.detail.value);
					that.goodsName = v;
					that.showDel = true;
				}, 300)
				if (!that.goodsName) {
					that.showDel = false;
				}
			},
			toSearch(e){
				// this.goodsName = this.$trim(e.detail.value);
				const keyword = e.type == 'confirm' ? this.$trim(e.detail.value) : this.$trim(this.goodsName);
				this.goodsName = keyword;
				this.reload()
			},
			/* 删除搜索数据 */
			delSearchData(){
				this.goodsName = '';
				this.goodsList = [];
				this.page = 1;
				this.totalPage = '';
			},
			reload(){
				this.page = 1;
				this.totalPage = '';
				this.goodsList = [];
				this.loadEnd = false;
				this.showPage = true;
				this.getGoodsList()
			},
			getGoodsList() {
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.goodList,
					data: {
						page: that.page,
						limits: 15,
						goodsName:that.goodsName
					}
				}).then(res => {
					that.showPage = false;
					if (res.code == 0) {
						that.goodsList = that.goodsList.concat(res.data.data);
						that.totalPage = res.data.last_page;
						if(that.totalPage == that.page){
							that.loadEnd = true;
						}
					}
				})
			},
			refreshList(){
				this.refresherTriggered = true;
				this.goodsList = [];
				this.page = 1;
				this.totalPage = '';
				this.getGoodsList();
				setTimeout(()=>{
					this.refresherTriggered = false;
				},100)
			},
			loadData(){
				let that = this;
				if (that.page < that.totalPage) {
					this.loadEnd = false;
					that.page++;
					that.getGoodsList()
				} else {
					return;
				}
			},
			getScrollHeight(){
				const firstCateHeight = uni.upx2px(120),
					navbarHeight = app.globalData.headAllHeight,
					elseHeight = firstCateHeight + navbarHeight;
					console.log('app.globalData.windowHeight',app.globalData.windowHeight)
				this.scrollViewHeight = app.globalData.screenHeight - elseHeight;
			},
			toGoodsDetail(id) {
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?goods_id=${id}`
				})
			},
			addCart(id){
				if(!this.Authorization){
					uni.navigateTo({
						url:'/pages/login-page/login/login'
					})
					return;
				}
				uni.showLoading({
					title:'加载中...',
					mask:true,
				})
				app.globalRequest({
					api:app.getApi().goods.goodsDetail,
					data:{
						goods_id:id
					}
				}).then(res=>{
					uni.hideLoading();
					if(res.code == 0){
						this.goodsDetail = res.data;
						this.$refs.skuModal.toShowSkuPopup();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-main{
		width: 690rpx;
		height: 72rpx;
		padding:0 4rpx 0 28rpx;
		border-radius: $supplier-border-radius;
		background: #fff;
		margin:auto;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index:2;
		.line{
			width: 2rpx;
			height: 30rpx;
			background-color:#999;
			margin:0 20rpx 0 16rpx;
		}
		.search-con{
			flex:1;
			padding-left:10rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}
		.close-btn{
			width: 50rpx;
			height: 50rpx;
			border-radius: 30rpx;
			flex-shrink: 0;
		}
		.btn{
			width: 146rpx;
			height: 64rpx;
			background: $supplier-btn-linear-color;
			color:#fff;
			border-radius: $supplier-border-radius;
		}
	}
	.search-wrap{
		width:100%;
		height: 120rpx;
	}
	.wrap{
		width: 100%;
		// background: red;
		background: #fff;
		position: relative;
		z-index:4;
		border-radius: 24rpx 24rpx 0 0;
	}
	.goods-item{
		margin:0 24rpx;
		display: flex;
		padding-top:32rpx;
		.goods-img{
			width: 240rpx;
			height: 240rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right:16rpx;
		}
		.goods-info{
			flex:1;
			overflow: hidden;
			position: relative;
			.goods-name{
				width: 100%;
				-webkit-line-clamp: 2;
				padding-top:10rpx;
			}
			.goods-attr{
				font-size: 24rpx;
				color:#AFB0B2;
				padding-top:24rpx;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.goods-b{
				width: 100%;
				justify-content: space-between;
				// margin-top:66rpx;
				position: absolute;
				left:0;
				bottom:34rpx;
				.goods-price-wrap{
					display: flex;
					align-items: baseline;
					.goods-price{
						color:#FF5040;
						font-size: 36rpx;
						text{
							font-size: 24rpx;
						}
					}
					.goods-price-line{
						font-size: 24rpx;
						color:#AFB0B2;
						padding-left:6rpx;
						text-decoration: line-through;
					}
				}
			}
			.cart{
				width: 48rpx;
				height: 48rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.no-data-wrap{
		margin-top:100rpx;
	}
	.unit{
		font-size: 20rpx;
		color: #AFB0B2;
	}
</style>
